<template>
  <div class="edit-profile">
    <!-- 头部 -->
    <hm-header>编辑资料</hm-header>
    <!-- 头像 -->
    <div class="img-box">
      <img :src="headImg" alt="">
      <van-uploader :after-read="afterRead" />
    </div>
    <!-- 操作导航列表 -->
    <hm-nav @click="showNickname" name="昵称" :info="profile.nickname"></hm-nav>
    <hm-nav @click="showPassword" name="密码" info="******"></hm-nav>
    <hm-nav @click="showGender" name="性别" :info="profile.gender === 1 ? '男' : '女'"></hm-nav>
   <van-dialog @confirm="editNickname" v-model="isShowNickname" title="修改昵称" show-cancel-button>
      <van-field v-model="nickname" placeholder="请输入昵称" />
    </van-dialog>
       <van-dialog :before-close="beforePassClose" v-model="isShowPassword" title="修改密码" show-cancel-button>

      <van-field
        @click-right-icon="changePassType"
        :type="isShowPassType ? 'password' : 'text'"
        :right-icon="isShowPassType ? 'closed-eye': 'eye-o'"
        v-model="password"
        placeholder="请输入密码"/>
    </van-dialog>

    <van-dialog @confirm="editGender" v-model="isShowGender" title="修改性别" show-cancel-button>
     <van-radio-group v-model="gender" direction="horizontal">
        <van-radio :name="1">男</van-radio>
        <van-radio :name="0">女</van-radio>
      </van-radio-group>
    </van-dialog>

    <!-- 截图的蒙层 -->
  <div class="mask" v-show="isShowMask">
      <vueCropper
        ref="cropper"
        :img="option.img"
        :autoCrop="option.autoCrop"
        :autoCropWidth="option.autoCropWidth"
        :autoCropHeight="option.autoCropHeight"
        :fixed="option.fixed"
        :fixedNumber="option.fixedNumber">

      </vueCropper>
      <van-button class="cancel" type="danger" @click="cancel">取消选择</van-button>
      <van-button class="crop" type="primary" @click="crop">确认裁剪</van-button>
  </div>
  </div>

</template>

<script>
import { VueCropper } from 'vue-cropper'
export default {
  components: {
    VueCropper
  },
  computed: {
    headImg () {
      return this.$axios.defaults.baseURL + this.profile.head_img
    }
  },
  data () {
    return {
      profile: {},
      isShowNickname: false,
      nickname: '',
      isShowPassword: false,
      password: '',
      isShowPassType: true,
      isShowGender: false,
      gender: 1,

      option: {
        img: '', // 裁剪图片的地址, 必填, 将来给需要裁剪的图片的地址
        autoCrop: true, // 是否默认生成截图框 -- 需要配置
        autoCropWidth: 150, // 默认生成截图框宽度
        autoCropHeight: 150, // 默认生成截图框高度
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1] // 截图框的宽高比例
      },
      isShowMask: false
    }
  },
  created () {
    this.getProfile()
  },
  methods: {
    async getProfile () {
      const id = localStorage.getItem('user_id')
      const res = await this.$axios.get(`/user/${id}`)
      const { statusCode, data } = res.data
      if (statusCode === 200) {
        this.profile = data
        console.log(this.profile)
      }
    },
    async editProfile (data) {
      const id = localStorage.getItem('user_id')
      const res = await this.$axios.post(`/user_update/${id}`, data)
      const { statusCode } = res.data
      if (statusCode === 200) {
        this.$toast.success('修改成功')
        this.getProfile()
      }
    },
    showNickname () {
      this.isShowNickname = true
      this.nickname = this.profile.nickname
    },
    editNickname () {
      this.editProfile({ nickname: this.nickname })
    },
    showPassword () {
      this.isShowPassword = true
      this.password = this.profile.password
    },
    changePassType () {
      this.isShowPassType = !this.isShowPassType
    },

    editPassword () {
      this.editProfile({ password: this.password })
    },
    beforePassClose (action, done) {
      if (action === 'confirm') {
        if (/^\w{3,12}$/.test(this.password)) {
          // 通过了校验, 发送ajax请求, 进行修改, 关闭框
          this.editProfile({ password: this.password })
          done()
        } else {
          // 如果没通过校验, 阻止框的关闭, 提示用户
          this.$toast('密码必须是3~12位的字符')
          done(false)
        }
      }
      if (action === 'cancel') {
        done()
      }
    },
    showGender () {
      this.isShowGender = true
      this.gender = this.profile.gender
    },
    editGender () {
      this.editProfile({ gender: this.gender })
    },

    async afterRead (file) {
      this.isShowMask = true
      this.option.img = file.content
    },
    crop () {
      this.$refs.cropper.getCropBlob(async (imgData) => {
        const fd = new FormData()
        fd.append('file', imgData)
        const res = await this.$axios.post('/upload', fd)
        const { statusCode, data } = res.data
        if (statusCode === 200) {
          this.editProfile({ head_img: data.url })
        } else {
          this.$toast('文件上传失败')
        }
      })
      this.isShowMask = false
    },
    cancel () {
      this.isShowMask = false
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-profile {
  .img-box {
    padding: 30px;
    position: relative;
    img {
      width: 80px;
      height: 80px;
      margin: 0 auto;
      border-radius: 50%;
    }
    .van-uploader {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 30px;
        opacity: 0;
    }
  }
  .van-dialog {
      padding: 0 20px;
      .van-field {
          margin:20px 0;
          border: 1px solid #ccc;
      }
  }
    .van-radio-group {
        justify-content: space-around;
        padding: 20px 0;
    }
    .mask {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 999;
        left: 0;
        top: 0;
    .crop {
        position: absolute;
        left: 30px;
        bottom: 10px;
    }
    .cancel {
        position: absolute;
        right: 30px;
        bottom: 10px;
    }
  }
}
</style>
